<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px" @close="onCancel">
			<el-input v-model="state.queryParams.name" placeholder="请输入商品名称" clearable class="w81 mr5" />
			<el-button type="primary" @click="getList">
				<el-icon>
					<ele-Search />
				</el-icon>
				查 询
			</el-button>
			<el-table class="mt5" :data="state.tableList" v-loading="state.loading" border>
				<el-table-column label="商品名称" align="center" prop="title" />
				<el-table-column label="售价" align="center" prop="min_price" />
			</el-table>
			<template #footer>
				<el-row :gutter="20">
					<el-col :span="12">
						<PaginationComponent
							v-if="state.total"
							:total="state.total"
							v-model:page="state.queryParams.pageNum"
							v-model:limit="state.queryParams.pageSize"
							@pagination="getList"
						/>
					</el-col>
				</el-row>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { goodsTagsApi } from '/@/api';

const GoodsTagsApi = goodsTagsApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	queryParams: {
		goods_tags_id: '',
		name: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
});

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog.isShowDialog = true;
	state.dialog.title = `「${row.name}」标签下的商品`;
	state.queryParams = {
		goods_tags_id: row.id,
		name: '',
		pageNum: 1,
		pageSize: 10,
	};
	state.tableList = [];
	getList();
};
// 刷新列表
const getList = () => {
	state.loading = true;
	_goodsTagsBindGoodsList(state.queryParams);
};

/********** 网络请求 **********/
// 标签已绑定的商品列表
const _goodsTagsBindGoodsList = (params: Object) => {
	GoodsTagsApi.goodsTagsBindGoodsList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
